//定义懒加载插件
import {
  useIntersectionObserver
} from '@vueuse/core'

export const lazyPlugin = {
  install(app) {
    app.directive('img-lazy', {
      //el：指令绑定的那个元素 img
      //binding：binding.value  指令等于号后面绑定的表达式的值  在这里是图片url
      mounted(el, binding) {
        const {stop} = useIntersectionObserver(
          el,
          ([entry]) => {
            if (entry.isIntersecting) {
              el.src = binding.value
              stop()//在第一次完成的时候就停止监视
            }
          },
        )
      }
    })
  }
}
